<template>
  <div class="tab-dialog-box" style="position: relative">
    <el-tabs v-model="activeFragmentId" :before-leave="onFragmentChange">
      <el-tab-pane label="我的委托" name="fragmentMyAgent" style="width: 100%">
        <tab-content-my-agent v-if="activeFragmentId === 'fragmentMyAgent'" ref="tabMyAgent" />
      </el-tab-pane>
      <el-tab-pane label="委托给我" name="fragmentAgentToMe" style="width: 100%">
        <tab-content-agent-to-me
          v-if="activeFragmentId === 'fragmentAgentToMe'"
          ref="tabAgentToMe"
        />
      </el-tab-pane>
      <el-tab-pane label="委托待办" name="fragmentMyTask" style="width: 100%">
        <tab-content-my-task v-if="activeFragmentId === 'fragmentMyTask'" ref="tabMyTask" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts">
export default {
  name: 'formSysAgent',
};
</script>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { TabPaneName } from 'element-plus';
import TabContentMyAgent from './TabContentMyAgent.vue';
import TabContentAgentToMe from './TabContentAgentToMe.vue';
import TabContentMyTask from './TabContentMyTask.vue';

const activeFragmentId = ref<TabPaneName>('fragmentMyAgent');
const tabMyAgent = ref();
const tabAgentToMe = ref();
const tabMyTask = ref();

const onFragmentChange = (newPanel: TabPaneName) => {
  if (newPanel === activeFragmentId.value) return;
  activeFragmentId.value = newPanel;

  // 根据切换的面板刷新对应的数据
  if (newPanel === 'fragmentMyAgent') {
    refreshFragmentMyAgent();
  } else if (newPanel === 'fragmentAgentToMe') {
    refreshFragmentAgentToMe();
  } else if (newPanel === 'fragmentMyTask') {
    refreshFragmentMyTask();
  }
  return true;
};

const refreshFragmentMyAgent = () => {
  tabMyAgent.value?.refreshFragmentMyAgent();
};

const refreshFragmentAgentToMe = () => {
  tabAgentToMe.value?.refreshFragmentAgentToMe();
};

const refreshFragmentMyTask = () => {
  tabMyTask.value?.onResume();
};

onMounted(() => {
  // 初始化加载第一个 tab 的数据
  refreshFragmentMyAgent();
});
</script>

<style lang="scss" scoped>
.tab-dialog-box {
  padding: 0 !important;
  margin: 0 !important;
  background-color: #f6f6f6 !important;
  :deep(.el-tabs__header) {
    margin-bottom: 0;
    background-color: white;
    border-top: 1px solid #e8e8e8;
  }
  :deep(.el-tabs__nav-wrap::after) {
    display: none;
  }
  :deep(.el-tabs__item) {
    height: 44px;
    line-height: 44px;
  }
  :deep(.el-tabs__nav-wrap) {
    padding-left: 24px;
  }
  :deep(.el-tabs__content) {
    overflow: hidden;
  }

  :deep(.tab-content-box) {
    display: flex;
    margin: 16px;
    flex-direction: column;
    flex: 1;
  }
}
</style>
